import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { changeActive, getChannelList } from '../store/action/channel'

export default function Channel() {
  const dispatch = useDispatch()
  useEffect(() => {
    // 发送请求把数据存储到 Redux
    dispatch(getChannelList())
  }, [dispatch])
  // !从 Redux 里面获取数据
  const { list: channels, active } = useSelector((state) => state.channel)
  // 用 Redux 中的状态和循环时候的 id 进行比较，如果一样则应用 select class
  // 点击 li 的时候更新 redux 中的状态
  const handleClick = (id) => dispatch(changeActive(id))
  return (
    <ul className='catagtory'>
      {channels.map((item) => (
        <li
          key={item.id}
          className={item.id === active ? 'select' : ''}
          onClick={() => handleClick(item.id)}
        >
          {item.name}
        </li>
      ))}
    </ul>
  )
}
